<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="../images/favicon-20190426051725675.ico" type="image/x-icon">
    <title>AI泡悠智能茶机管理后台</title>
    <link rel="stylesheet" href="../css/index.css">
    <script src="https://at.alicdn.com/t/font_895159_8lbk7qwrha5.js"></script>
    <script src="../js/jquery-2.1.1.min.js"></script>
    <script src="../js/layui/layui.all.js"></script>
    <link rel="stylesheet" href="../js/layui/css/layui.css">
    <link rel="stylesheet" href="../css/reset.css">
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
</head>

<body>
    <div class="layui-row index-page">
        <div class="layui-col-md2"></div>
        <div class="home-content layui-col-md10">
            <div class="Home-top ">
                <div class="Home-top-item">
                    <p>总销售额</p>
                    <div class="price">¥ 1631436.38</div>
                    <div>292033 笔</div>
                    <div>退款金额：￥222/20笔</div>
                </div>
                <div class="Home-top-item">
                    <p>今日销售额</p>
                    <div class="price">¥ 1631436.38</div>
                    <div>292033 笔</div>
                    <div>退款金额：￥222/20笔</div>
                </div>
                <div class="Home-top-item">
                    <p>昨日销量</p>
                    <div class="price">¥ 1631436.38</div>
                    <div>292033 笔</div>
                    <div>退款金额：￥222/20笔</div>
                </div>
                <div class="Home-top-item">
                    <p>本月销量</p>
                    <div class="price">¥ 1631436.38</div>
                    <div>292033 笔</div>
                    <div>退款金额：￥222/20笔</div>
                </div>
            </div>
            <div class="device">
                <div class="device-left">
                    <ul class="device-list">
                        <li class="device-item">
                            <div class="device-info">
                                <p class="info-num">20</p>
                                <p class="device-ste">设备离线</p>
                            </div>
                        </li>
                        <li class="device-item">
                            <div class="device-info">
                                <p class="info-num">20</p>
                                <p class="device-ste">缺水设备</p>
                            </div>
                        </li>
                        <li class="device-item">
                            <div class="device-info">
                                <p class="info-num">20</p>
                                <p class="device-ste">通讯故障</p>
                            </div>
                        </li>
                        <li class="device-item">
                            <div class="device-info">
                                <p class="info-num">20</p>
                                <p class="device-ste">缺货设备</p>
                            </div>
                        </li>

                        <li class="device-item">
                            <div class="device-info">
                                <p class="info-num">20</p>
                                <p class="device-ste">低水位设备</p>
                            </div>
                        </li>
                        <li class="device-item">
                            <div class="device-info">
                                <p class="info-num">20</p>
                                <p class="device-ste">货道故障</p>
                            </div>
                        </li>
                        <li class="device-item">
                            <div class="device-info">
                                <p class="info-num">20</p>
                                <p class="device-ste">失败订单</p>
                            </div>
                        </li>
                        <li class="device-item">
                            <div class="device-info">
                                <p class="info-num">20</p>
                                <p class="device-ste">失联订单</p>
                            </div>
                        </li>
                        <li class="device-item">
                            <div class="device-info">
                                <p class="info-num">20</p>
                                <p class="device-ste">今日未售卖设备</p>
                            </div>
                        </li>
                        <li class="device-item">
                            <div class="device-info">
                                <p class="info-num">20</p>
                                <p class="device-ste">昨日未售卖设备</p>
                            </div>
                        </li>
                        <li class="device-item">
                            <div class="device-info">
                                <p class="info-num">20</p>
                                <p class="device-ste">本周未售卖设备</p>
                            </div>
                        </li>
                        <li class="device-item">
                            <div class="device-info">
                                <p class="info-num">20</p>
                                <p class="device-ste">本月未售卖设备</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="device-right">
                    <div class="collect">
                        <div>
                            170/213在线
                        </div>
                        <div>
                            总设备在线情况
                        </div>
                    </div>
                    <div class="" id="main" style="height:300px;width: 60%;">

                    </div>

                </div>
            </div>
            <div style="" class="line-box">
                <div class="title">
                    <div>
                        <p class="title-active">销售额</p>
                        <p>销量</p>
                    </div>
                    <div class="title-right">
                        <p class="title-active">今日</p>
                        <p>本周</p>
                        <p>本月</p>
                    </div>
                </div>
                <div class="line-right">
                    <div id="line" style="height:400px;width: 80%;">

                    </div>
                    <div class="ranking">
                        <div class="ranking-title">销量排行榜</div>
                        <div class="layui-tab">
                            <ul class="layui-tab-title">
                                <li class="layui-this ">设备</li>
                                <li>点位</li>
                                <li>场所</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <ul>
                                        <li>
                                            <span class='circle'>1</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>2</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>3</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>4</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>5</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>6</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>7</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>8</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>9</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>10</span>
                                            <span>DYCB123456</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="layui-tab-item">
                                    <ul>
                                        <li>
                                            <span class='circle'>1</span>
                                            <span>厦门大学</span>
                                        </li>
                                        <li>
                                            <span class='circle'>2</span>
                                            <span>泉州中医院</span>
                                        </li>
                                        <li>
                                            <span class='circle'>3</span>
                                            <span>眼科中心</span>
                                        </li>
                                        <li>
                                            <span class='circle'>4</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>5</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>6</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>7</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>8</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>9</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>10</span>
                                            <span>DYCB123456</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="layui-tab-item">
                                    <ul>
                                        <li>
                                            <span class='circle'>1</span>
                                            <span>学校</span>
                                        </li>
                                        <li>
                                            <span class='circle'>2</span>
                                            <span>食堂</span>
                                        </li>
                                        <li>
                                            <span class='circle'>3</span>
                                            <span>医院</span>
                                        </li>
                                        <li>
                                            <span class='circle'>4</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>5</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>6</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>7</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>8</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>9</span>
                                            <span>DYCB123456</span>
                                        </li>
                                        <li>
                                            <span class='circle'>10</span>
                                            <span>DYCB123456</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="my-map">
                <div class="map-header">
                    <div>全国销售热力图</div>
                    <div>
                        <ul class="selected-type">
                            <li class="title-active">点位</li>
                            <li>市级</li>
                            <li>省级</li>
                        </ul>
                    </div>
                </div>
                <div id="map" style="height:1000px;width: 100%;">

                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        tooltip: {
            formatter: "{a} <br/>{b} : {c}%"
        },
        series: [{
            name: '设备在线',
            type: 'gauge',
            center: ['50%', '50%'], // 默认全局居中
            radius: [0, '75%'],
            startAngle: 140,
            endAngle: -140,
            min: 0, // 最小值
            max: 100, // 最大值
            precision: 0, // 小数精度，默认为0，无小数点
            splitNumber: 10, // 分割段数，默认为5
            axisLine: { // 坐标轴线
                show: true, // 默认显示，属性show控制显示与否
                lineStyle: { // 属性lineStyle控制线条样式
                    color: [
                        [0.2, '#fc4025'],
                        [0.4, '#ef6c02'],
                        [0.8, '#fcd017'],
                        [1, '#00ff00']
                    ],
                    width: 20
                }
            },
            axisTick: { // 坐标轴小标记
                show: true, // 属性show控制显示与否，默认不显示
                splitNumber: 5, // 每份split细分多少段
                length: 4, // 属性length控制线长
                lineStyle: { // 属性lineStyle控制线条样式
                    color: '#eee',
                    width: 1,
                    type: 'solid'
                }
            },
            axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
                show: true,
                formatter: function(v) {
                    switch (v + '') {
                        case '10':
                            return '弱';
                        case '30':
                            return '低';
                        case '60':
                            return '中';
                        case '90':
                            return '高';
                        default:
                            return '';
                    }
                },
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'auto'
                }
            },
            splitLine: { // 分隔线
                show: true, // 默认显示，属性show控制显示与否
                length: 20, // 属性length控制线长
                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                    color: '#eee',
                    width: 2,
                    type: 'solid'
                }
            },
            pointer: {
                length: '80%',
                width: 8,
                color: 'auto'
            },
            title: {
                show: true,
                offsetCenter: ['-65%', -10], // x, y，单位px
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'auto',
                    fontSize: 15
                }
            },
            detail: {
                show: true,
                backgroundColor: 'rgba(0,0,0,0)',
                borderWidth: 0,
                borderColor: '#ccc',
                width: 100,
                height: 40,
                offsetCenter: ['-60%', 10], // x, y，单位px
                formatter: '{value}%',
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'auto',
                    fontSize: 30
                }
            },
            data: [{
                value: 30,
                name: '在线比'
            }]
        }]
    };
    myChart.setOption(option);
</script>
<script>
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('line'));
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        color: ['#EEB422', '#90EE90'],
        legend: {
            data: ['昨日营业额', '今日营业额']
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            //设置轴线的属性
            axisLine: {
                lineStyle: {
                    color: '#ddd',
                    width: 1, //这里是为了突出显示加上的
                }
            },
            data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
        }],
        yAxis: [{
            type: 'value',
            //设置轴线的属性
            axisLine: {
                lineStyle: {
                    color: '#ddd',
                    width: 1, //这里是为了突出显示加上的
                }
            }
        }],
        series: [{
            name: '昨日营业额',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210, 300, 400, 11, 130, 132, 456]
        }, {
            name: '今日营业额',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210, 300, 400, 56, 65, 546, 45]
        }]
    };
    myChart.setOption(option);
</script>
<script>
    var myChart = echarts.init(document.getElementById('map'));
    var city = [{
        name: '西藏',
        value: 605.83
    }, {
        name: '青海',
        value: 1670.44
    }, {
        name: '宁夏',
        value: 2102.21
    }, {
        name: '海南',
        value: 2522.66
    }, {
        name: '甘肃',
        value: 5020.37
    }, {
        name: '贵州',
        value: 5701.84
    }, {
        name: '新疆',
        value: 6610.05
    }, {
        name: '云南',
        value: 8893.12
    }, {
        name: '重庆',
        value: 10011.37
    }, {
        name: '吉林',
        value: 10568.83
    }, {
        name: '山西',
        value: 11237.55
    }, {
        name: '天津',
        value: 11307.28
    }, {
        name: '江西',
        value: 11702.82
    }, {
        name: '广西',
        value: 11720.87
    }, {
        name: '陕西',
        value: 12512.3
    }, {
        name: '黑龙江',
        value: 12582
    }, {
        name: '内蒙古',
        value: 14359.88
    }, {
        name: '安徽',
        value: 15300.65
    }, {
        name: '北京',
        value: 16251.93,
        // selected: true
    }, {
        name: '福建',
        value: 17560.18
    }, {
        name: '上海',
        value: 19195.69,
        // selected: true
    }, {
        name: '湖北',
        value: 19632.26
    }, {
        name: '湖南',
        value: 19669.56
    }, {
        name: '四川',
        value: 21026.68
    }, {
        name: '辽宁',
        value: 22226.7
    }, {
        name: '河北',
        value: 24515.76
    }, {
        name: '河南',
        value: 26931.03
    }, {
        name: '浙江',
        value: 32318.85
    }, {
        name: '山东',
        value: 45361.85
    }, {
        name: '江苏',
        value: 49110.27
    }, {
        name: '广东',
        value: 53210.28,
        // selected: true
    }]
    var option = {
        tooltip: {
            trigger: 'item'
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            x: 'center',
            y: 'center',
        },
        series: [{
            name: '',
            type: 'map',
            mapType: 'china',
            mapLocation: {
                x: 'center'
            },
            selectedMode: 'multiple',
            itemStyle: {
                normal: {
                    label: {
                        show: true
                    }
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            geoCoord: {
                "广州": [113.307649675, 23.1200491021],
                "泉州": [118.600362343, 24.901652384],
                "厦门": [118.103886046, 24.4892306125]
            },
            markPoint: { //动态标记
                // large: true, //这个选项，悬浮自动失效
                symbolSize: 8,
                itemStyle: {
                    normal: {
                        shadowBlur: 2,
                        shadowColor: 'rgba(37, 140, 249, 0.8)',
                        color: 'rgb(255, 114, 37)'
                    }
                },
                data: [{
                    name: '广州',
                    value: 605.83
                }, {
                    name: '泉州',
                    value: 605.83
                }, {
                    name: '厦门',
                    value: 111
                }],
                effect: {
                    show: true,
                    shadowBlur: 0
                },
            },
            data: city
        }, ],

        animation: false
    };
    myChart.setOption(option);
</script>

</html>